<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>The Starbuzz Bean Machie</title>

    <style type="text/css">
        body {
            background: #efe5d0 url(../resources/images/bacground.gif);
            margin: 20px;
        }

        form {
            display: table;
            padding: 10px;
            border: thin dotted #7e7e7e;
            background-color: #e1ceb8;
        }

        form textarea {
            width: 500px;
            height: 200px;
        }

        div.tablerow {
            display: table-row;
        }

        div.tablerow p {
            display: table-cell;
            vertical-align: top;
            padding: 3px;
        }

        div.tablerow p:first-child {
            text-align: right;
        }

        p.heading {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>The Starbuzz Bean Machine</h1>
    <h2>Fill out the from below and click "Order now" to order</h2>

    <!-- 发送的数据 -->
    <!-- 
        beans: House Blend
        beantype: ground
        bags: 2
        date: 2021-06-15
        extras[]: giftwrap
        name: 123
        address: Zhangjiang
        city: shanghai
        state: China
        zip: z
        phone: 12
        comments: I want to order
     -->

    <!-- 
         beans=House+Blend&beantype=ground&bags=2&date=2021-06-15&extras%5B%5D=giftwrap&name=123&address=Zhangjiang&city=shanghai&state=China&zip=z&phone=12&comments=I+want+to+order
      -->
    <form action="http://starbuzzcoffee.com/processorder.php" method="POST">
        <div class="tablerow">
            <p>Choose your beans:</p>
            <p>
                <select name="beans">
                    <option value="House Blend">House Blend</option>
                    <option value="Bolivia"> Shade Grown Bolivia Supermo</option>
                    <option value="Guatemala">Organic Guatemala</option>
                    <option value="Kenya">Kenya</option>
                </select>
            </p>
        </div>

        <div class="tablerow">
            <p>Type:</p>
            <p>
                <!--  选择咖啡为全豆咖啡，还是 研磨咖啡x? -->
                <input type="radio" name="beantype" value="whole" /> Whole Bean
                <input type="radio" name="beantype" value="ground" checked /> Ground
            </p>
        </div>

        <div class="tablerow">
            <p> Numbers of bag: </p>
            <p> <input type="number" name="bags" min="1" max="10" /> </p>
        </div>

        <div class="tablerow">
            <p>Must arrive by data:<input type="date" name="date" /></p>
        </div>

        <div class="tablerow">
            <p> Extras: </p>
            <p>
                <input type="checkbox" name="extras[]" value="giftwrap">Gift wrap<br />
                <input type="checkbox" name="extras[]" value="catalog" checked /> Include categoy with other
            </p>
        </div>

        <div class="tablerow">
            <p class="heading">Ship to:</p>
            <p></p>
        </div>
        <div class="tablerow">
            <p> Name: </p>
            <p> <input type="text" name="name" /> </p>
        </div>
        <div class="tablerow">
            <p>Address:</p>
            <p> <input type="text" name="address" /> </p>
        </div>
        <div class="tablerow">
            <p> City: </p>
            <p><input type="text" name="city" /></p>
        </div>
        <div class="tablerow">
            <p>State:</p>
            <p><input type="text" name="state" /><br /></p>
        </div>
        <div class="tablerow">
            <p>Zip:</p>
            <p><input type="text" name="zip" /></p>
        </div>
        <div class="tablerow">
            <p>Phone:</p>
            <p><input type="tel" name="phone" /></p>
        </div>


        <div class="tablerow">
            <p>Customer comments:</p>
            <p><textarea name="comments"></textarea></p>
        </div>

        <div class="tablerow">
            <p></p>
            <p><input type="submit" value="Order Now" /></p>
        </div>
    </form>
</body>

</html>